<template>
    <div class="container">
        <div class="logo"></div>
        <div class="content">
            <div class="pic"></div>
            <div class="field">
                <div class="form-cont">
                    <el-tabs class="form" v-model="loginForm.loginType" style=" float:none;">
                        <el-tab-pane label="账号密码登录" name="uname">
                        </el-tab-pane>
                    </el-tabs>
                    <el-form ref="loginForm" :model="loginForm" size="medium" :rules="LoginRules" class="login-form">
                        <!-- <el-form-item prop="tenantName" v-if="tenantEnable">
                            <el-input v-model="loginForm.tenantName" type="text" auto-complete="off" placeholder='租户'>
                                <svg-icon slot="prefix" icon-class="tree" class="el-input__icon input-icon" />
                            </el-input>
                        </el-form-item> -->
                        <!-- 账号密码登录 -->
                        <div v-if="loginForm.loginType === 'uname'">
                            <el-form-item prop="username">
                                <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
                                    <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
                                </el-input>
                            </el-form-item>
                            <el-form-item prop="password">
                                <el-input v-model="loginForm.password" type="password" auto-complete="off"
                                    placeholder="密码" @keyup.enter.native="getCode">
                                    <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
                                </el-input>
                            </el-form-item>
                            <el-checkbox v-model="loginForm.rememberMe" style="margin:0 0 25px 0;">记住密码</el-checkbox>
                        </div>
                        <!-- 下方的登录按钮 -->
                        <el-form-item style="width:100%;">
                            <el-button :loading="loading" size="medium" type="primary" style="width:100%;"
                                @click.native.prevent="getCode">
                                <span v-if="!loading">登 录</span>
                                <span v-else>登 录 中...</span>
                            </el-button>
                        </el-form-item>
                    </el-form>
                </div>

            </div>
        </div>
        <div class="footer">
            Copyright © 2022-2025 ruoyi.51wephone.cn All Rights Reserved.
        </div>
    </div>
</template>

<script>
import { mapMutations } from 'vuex';


export default {
    name: 'login',
    data() {
        return {
            tenantEnable: true,
            loginForm: {
                loginType: "uname",
                username: "",
                password: "",
                captchaVerification: "",
                mobile: "",
                mobileCode: "",
                rememberMe: false,
                tenantName: "",
            },
            LoginRules: {
                username: [
                    { required: true, trigger: "blur", message: "用户名不能为空" }
                ],
                password: [
                    { required: true, trigger: "blur", message: "密码不能为空" }
                ],
                tenantName: [
                    { required: true, trigger: "blur", message: "租户不能为空" },
                    // {
                    //     validator: (rule, value, callback) => {
                    //         // debugger
                    //         getTenantIdByName(value).then(res => {
                    //             const tenantId = res.data
                    //             if (tenantId && tenantId >= 0) {
                    //                 // 设置租户
                    //                 setTenantId(tenantId)
                    //                 callback()
                    //             } else {
                    //                 callback('租户不存在')
                    //             }
                    //         })
                    //     },
                    //     trigger: 'blur'
                    // }
                ]
            },
            loading: false,
        };
    },
    props: {},

    components: {},

    created() { },

    mounted() { },

    beforeDestroy() { },

    methods: {
        ...mapMutations([
            'editRoutePath',
        ]),
        getCode() {
            // 情况一，未开启：则直接登录
            // if (!this.captchaEnable) {
            this.handleLogin({})
            // return
            // }

            // 情况二，已开启：则展示验证码；只有完成验证码的情况，才进行登录
            // 弹出验证码
            // this.$refs.verify.show()
        },
        handleLogin(captchaParams) {
            this.editRoutePath('/home')
            this.$router.push({ path: 'home' })
            // this.$refs.loginForm.validate(valid => {
            //     // console.log("发起登录", this.loginForm);
            //     // if (valid) {
            //     //     this.loading = true
            //     //     // 设置 Cookie
            //     //     if (this.loginForm.rememberMe) {
            //     //         setUsername(this.loginForm.username)
            //     //         setPassword(this.loginForm.password)
            //     //         setRememberMe(this.loginForm.rememberMe)
            //     //         setTenantName(this.loginForm.tenantName)
            //     //     } else {
            //     //         removeUsername()
            //     //         removePassword()
            //     //         removeRememberMe()
            //     //         removeTenantName()
            //     //     }
            //     //     this.loginForm.captchaVerification = captchaParams.captchaVerification
            //     //     // 发起登陆
            //     //     // console.log("发起登录", this.loginForm);
            //     //     this.$store.dispatch(this.loginForm.loginType === "sms" ? "SmsLogin" : "Login", this.loginForm).then(() => {
            //     //         this.$router.push({ path: this.redirect || "/" }).catch(() => {
            //     //         })
            //     //     }).catch(() => {
            //     //         this.loading = false
            //     //     })
            //     // }
            // })
        },
    },

    computed: {},

    watch: {},

    directives: {},

    filters: {}
};
</script>

<style scoped lang="scss">
/** PC */
$W: 1000;
$H: 1920;
$picW: 438;
$picH: 560;
$formW: 320;
$tabW: $formW / 2;
$rowH: 56;
$buttonH: 50;
// container
$bjImg: '@/assets/img/login/bg.png';
$bjColor: #e6ebf2;
// container-logo
$logo: '@/assets/img/login/login-logo.png';
$logoWidth: 417px;
$logoHeight: 64px;
// container-content
$contentWidth: round($W / $H * 100) * 1vw;
$contentHeight: round($picH / $W * 100) / 100 * $contentWidth;
$contentBgColor: #ffffff;
// container-content-pic
$picWidth: round($picW / $H * 100) * 1vw;
$picHeight: inherit;
$pic: '@/assets/img/login/pic.png';
// container-content-field
$fieldWidth: $contentWidth - $picWidth;
$fieldHeight: inherit;
// container-content-field-form
$formWidth: $formW * 1px;
$tabWidth: $tabW * 1px;
$rowHeight: $rowH * 1px;
$buttonHeight: $buttonH * 1px;

.container {
    width: inherit;
    height: inherit;
    background: $bjColor url($bjImg) no-repeat;
    background-size: cover;
    position: relative;
    transition: all 100ms ease-in-out;

    .logo {
        width: $logoWidth;
        height: $logoHeight;
        position: absolute;
        top: 50px;
        left: 50%;
        transform: translateX(-50%);
        background-image: url($logo);
        background-size: contain;
    }

    .content {
        width: $contentWidth;
        height: $contentHeight;
        background-color: $contentBgColor;
        box-shadow: 0px 16px 40px rgba(0, 0, 0, 0.07);
        border-radius: 20px;
        // 定位
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        // dis
        display: flex;
        align-items: center;


        .pic {
            width: $picWidth;
            height: $picHeight;
            background-image: url($pic);
            background-repeat: no-repeat;
            background-size: cover;
            border-radius: 20px 0 0 20px;
        }

        .field {
            width: $fieldWidth;
            height: $fieldHeight;
            background: $contentBgColor;
            border-radius: 0 20px 20px 0;
            box-sizing: border-box;


            .form-cont {
                margin: 50% auto;
                transform: translateY(-50%);
                width: $formWidth;

                .login-form {
                    margin-top: 30px;
                }
            }
        }
    }

    .footer {
        height: 16px;
        font-size: 14px;
        color: #8c8c8c;
        position: absolute;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
    }
}

@media screen and (min-width: 599px) and (max-width: 1366px) {
    .container {
        .content {
            width: 710px;
            height: 397px;
            transition: all 100ms ease-in-out;

            .pic {
                width: 314px;
            }

            .field {
                width: calc(710px - 314px);
                left: 314px;

                .form {
                    width: 320px;

                    :deep(.el-input__inner) {
                        width: 320px;
                        height: 56px;
                    }

                    .button {
                        height: 50px;
                    }
                }
            }
        }
    }
}

/** MOBILE */
</style>
